<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4MmEvEzM3G7rkOZED5kkKG9E4vgF4rd0"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=4MmEvEzM3G7rkOZED5kkKG9E4vgF4rd0"></script>
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        #pay1{
            float: left;
            margin-left: 80px;

        }
        #pay2{
            float: left;
            margin-left: 15px;

        }
        #balance{
            margin-left: 150px;
        }
        .dialog-footer{
            margin-left: 30px;
        }
    </style>

</head>

<body>
<div id="app1">

    <!-- 回到顶部 -->
    <template>
        <el-backtop></el-backtop>
    </template>

    <!-- 头部栏 -->
    <el-container>
        <el-header style="height:145px;background-color: #F8F8F8;">
            <el-row>
                <el-col>
                    <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                             background-color="#F8F8F8">
                        <el-menu-item index="1" style="margin-left: 350px;padding: 0px;">
                            <img src="../img/定位.png" width="35"/>
                        </el-menu-item>
                        <el-menu-item index="2" style="padding:0px;margin: 0px 5px;">
                            <a href="/html/shouye.html" style="text-decoration: none"><span>锅锅商城</span></a>
                        </el-menu-item>
                        <!--                    <el-menu-item index="3" style="padding: 0px;margin-right: 20px;">-->
                        <!--                        <span>[切换]</span>-->
                        <!--                    </el-menu-item>-->

                        <el-menu-item index="4" style="color: red;"><a
                                :href="myUrl" style="text-decoration: none;">{{username}}</a></el-menu-item>
                        <el-menu-item index="5" v-if="!loginStatus"><a :href="myUrl"
                                                                       style="text-decoration: none;">免费注册</a>
                        </el-menu-item>
                        <el-menu-item index="5" v-if="loginStatus" @click="logout">退出</el-menu-item>

                        <el-submenu index="6">
                            <template slot="title">个人中心</template>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-1">我的订单</el-menu-item>
                            </a>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-2">订单速查</el-menu-item>
                            </a>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-3">我的收藏</el-menu-item>
                            </a>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-4">我的评价</el-menu-item>
                            </a>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-5">我的设置</el-menu-item>
                            </a>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-6">会员中心</el-menu-item>
                            </a>
                            <a :href="myUrl" style="text-decoration: none;">
                                <el-menu-item index="6-7">积分商城</el-menu-item>
                            </a>
                        </el-submenu>

                        <el-submenu index="7">
                            <template slot="title">商户服务</template>
                            <el-menu-item index="7-1">商户中心</el-menu-item>
                            <el-menu-item index="7-2">申请加盟</el-menu-item>
                            <el-menu-item index="7-3">店铺编辑</el-menu-item>
                            <el-menu-item index="7-4">菜单编辑</el-menu-item>
                            <el-menu-item index="7-5">销量查询</el-menu-item>
                            <el-menu-item index="7-6">我的设置</el-menu-item>
                        </el-submenu>
                        <el-submenu index="8">
                            <template slot="title">帮助中心</template>
                            <el-menu-item index="8-1">平台规则</el-menu-item>
                            <el-menu-item index="8-2">联系客服</el-menu-item>
                        </el-submenu>
                    </el-menu>
                    <div class="line"></div>
                </el-col>
            </el-row>
            <!-- 搜索框 -->
            <el-row>
                <el-col style="margin-left: 350px;" :span="1">
                    <img src="../img/恐龙.png" width="50px"/>
                </el-col>
                <el-col :span="2">
                    <div style="font-size:16px;color:black;line-height: 50px;">锅锅餐饮</div>
                </el-col>
                <el-col :span="6" :offset="0">
                    <div style="margin-top: 1px;width:500px;line-height: 50px;">
                        <el-input placeholder="搜索商家或者地点" v-model="searchInput" class="input-with-select">
                            <el-select v-model="searchSelect" slot="prepend" placeholder="请选择"
                                       @change="MethodSearchSelectChange">
                                <el-option label="餐厅" value="1"></el-option>
                                <el-option label="地点" value="2"></el-option>
                                <el-option label="菜名" value="3"></el-option>
                                <el-option label="订单" value="4"></el-option>
                            </el-select>
                            <i slot="suffix" class="el-input__icon el-icon-circle-close"
                               @click="MethodClearSearchInput"></i>
                            <el-button slot="append" icon="el-icon-search" @click="MethodBeginSearch()"></el-button>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
            <!-- 搜索框下的-"搜索发现" -->
            <el-row>
                <el-col style="margin-left:540px;" :span="1">
                    <span style="font-size: 12px;color:#999;">搜索发现：</span>
                </el-col>
                <el-col :span="0.1" v-for="i in searchReminderData" style="margin: 0px 5px;">
                    <span style="font-size: 12px;color:#999;" @click="MethodSearchReminderClick(i)">{{i}}</span>
                </el-col>
            </el-row>
        </el-header>
    </el-container>


    <el-container>
        <!-- 主菜单 -->
        <el-main style="background-color: #E9EEF3;color: #333;text-align: center;">
            <!-- 导航面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:20px 150px;">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>美食</el-breadcrumb-item>
                <el-breadcrumb-item>火锅</el-breadcrumb-item>
                <el-breadcrumb-item>{{menuDatas.menuName}}</el-breadcrumb-item>
            </el-breadcrumb>

            <!-- 菜品展示卡 -->
            <el-card style="font-size: 12px;color: #666;background-color: #fff;border-radius: 10px;margin:0px 150px;
                    height: 380px;">
                <div style="width:61%;height:320px;float:left;padding-right: 50px;box-sizing:border-box;">
                    <el-row style="margin-bottom:10px;">
                        <el-col :span="24"><span style="font-size: 26px;color: #666;float: left;">
                                    {{menuDatas.menuName}}
                                </span></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4.5" style="float: left;">
                            <el-rate v-model="gradeValue" :colors="gradeColors" show-score disabled></el-rate>
                        </el-col>
                        <el-col :span="2">
                            <span>人均￥{{averagePrice}}</span>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="5.5" style="font-size: 14px;margin-bottom: 10px;">价格：￥<span style="font-size: 20px;
                                color: #f60;">{{menuDatas.price}}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5.5" style="font-size: 14px;margin-bottom: 10px;">
                            已售：{{menuDatas.saleNum}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5.5" style="font-size: 14px;margin-bottom: 10px;">
                            详情：{{menuDatas.description}}
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5.5" style="font-size: 14px;">营业时间：周一至周日 10:00-24:00</el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="2"><img src="../img/WIFI.png" width="25"></el-col>
                        <el-col :span="2"><img src="../img/酒水.png" width="25"></el-col>
                        <el-col :span="2"><img src="../img/停车场.png" width="25"></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="2">提供wifi</el-col>
                        <el-col :span="2">酒水免费</el-col>
                        <el-col :span="2">免费停车</el-col>
                    </el-row>
                </div>
                <div style="width:37%;height:380px;float:left">
                    <template>
                        <div v-if="menuImgs.length>0">
                            <el-carousel indicator-position="outside">

                                <el-carousel-item v-for="item in menuImgs" :key="item">
                                    <img :src="item"/>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div v-if="menuImgs.length==0">
                            <img src="../img/假装有图.jpg" width="250" height="250"/>
                        </div>
                    </template>
                </div>
            </el-card>

            <!-- 地图选店 -->
            <el-row>
                <h2 style="float: left;margin:35px 150px 5px 150px;">地图选店：</h2><br/>
            </el-row>
            <el-card style="background-color: #fff;border-radius: 10px;margin:0px 150px;">
                <!-- TODO 地图位置 -->
                <div id="map" style="height: 300px;"></div>
            </el-card>

            <!-- 店铺总览 -->
            <el-row>
                <h2 style="float: left;margin:35px 150px 5px 150px;">店铺总览：</h2><br/>
            </el-row>
            <!-- 店铺展示卡片 -->
            <el-card style="background-color: #fff;border-radius: 10px;margin:0px 150px;">
                <el-row>
                    <el-col :span="3">
                        <h4>{{restData.length}}个可选店面</h4>
                    </el-col>
                </el-row>
                <div v-for="item in restData" style="margin: 20px 0px;">
                    <div style="width: 64%;float: left;">
                        <!-- 遍历商店的图片库 找到对应的店铺id -->
                        <div style="float: left;" v-for="a in restImgs" v-if="a.id==item.restaurantId">
                            <img v-if="a.imgs.length>0" :src="a.imgs[0]" width="200"/>
                            <img v-if="a.imgs.length==0" src="../img/假装有图.jpg" width="200"/>
                        </div>

                        <div style="float: left;text-align: left;height: 150px;width: 520px;">
                            <el-row style="font-size:18px;color:black;margin: 10px;">
                                <el-col :span="24">分店名：{{item.shopName}}</el-col>
                            </el-row>
                            <el-row style="font-size:14px;color:#666;margin: 10px;">
                                <el-col :span="24">电话：{{item.tel}}</el-col>
                            </el-row>
                            <el-row style="font-size:16px;color:#666;margin: 10px;">
                                <el-col :span="24"> 地址：{{item.address}}</el-col>
                            </el-row>
                        </div>
                    </div>
                    <div style="width: 33%;height: 150px;float: left;">
                        <div style="width: 49%;height: 150px;float: left;">
                            <!-- TODO地图位置按钮 -->
                            <el-button type="primary" plain style="margin-top:50px" @click="showLocation(item)">地图位置</el-button>
                        </div>
                        <div style="width: 49%;height: 150px;float: left;">
                            <el-button type="primary" round style="margin-top:50px" @click="pay(item)">立即预定
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 添加评论 -->
            <div v-if="addCommentsModel" style="text-align: left;">
                <el-row>
                    <h2 style="float: left;margin:35px 150px 5px 150px;">请对该次就餐做出评价：</h2><br/>
                </el-row>
                <el-card style="background-color: #fff;border-radius: 10px;margin:0px 150px;">
                    <el-row>
                        <el-col :span="24" style="font-size: 18px;">在这里添加评论</el-col>
                    </el-row>
                    <el-row style="margin: 10px 0px 0px 0px;">
                        <el-col :span="2" :offset="6">味道：</el-col>
                        <el-col :span="4.5">
                            <el-rate v-model="addComment.score1" :colors="gradeColors" show-score>
                            </el-rate>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 1px 0px;">
                        <el-col :span="2" :offset="6">环境：</el-col>
                        <el-col :span="4.5" style="float: left;">
                            <el-rate v-model="addComment.score2" :colors="gradeColors" show-score>
                            </el-rate>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 1px 0px 10px 1px;">
                        <el-col :span="2" :offset="6">服务：</el-col>
                        <el-col :span="4.5" style="float: left;">
                            <el-rate v-model="addComment.score3" :colors="gradeColors" show-score>
                            </el-rate>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px 0px;">
                        <el-col :span="10" :offset="6">
                            <el-input type="textarea" placeholder="请输入内容" v-model="addComment.comments"
                                      maxlength="200" show-word-limit rows="5"></el-input>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px 0px;">
                        <el-col :span="4.5" :offset="6">
                            <el-upload class="upload-demo" action="a" ref="upload"
                                       :on-preview="handleCommentFilePreview" :on-change="fileChanges"
                                       :on-remove="handleCommentFileRemove" :file-list="fileList1"
                                       list-type="picture-card"
                                       :auto-upload="false" multiple :http-request="uploadFile">
                                <el-button size="small" type="primary">选取图片</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-col>
                    </el-row>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                    <el-row style="margin: 10px 0px;">
                        <el-col :span="4.5" :offset="10">
                            <el-button style="margin-left: 10px;" size="small" type="success"
                                       @click="submitCommentFileUpload">
                                提交评论
                            </el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </div>

            <!-- 菜品评论展示 -->
            <el-row v-if="menuComments.length > 0">
                    <span style="float: left;margin:35px 150px 5px 150px;color:#666;font-size: 16px;">
                        共有{{menuComments.length}}条评论：
                    </span><br/>
            </el-row>
            <el-card style="background-color: #fff;border-radius: 10px;margin:0px 150px;" v-if="menuComments.length > 0">
                <div v-for="a in menuComments" style="margin: 20px 5px;">
                    <!-- 获取用户昵称 -->
                    <el-row style="margin: 10px 0px;">
                        <el-col :span="24">
                            <div v-for="b in menuCommImgs" v-if="a.id==b.id" style="float: left;font-size: 20px;">
                                用户：{{b.userName}}
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px 0px;">
                        <el-col :span="4.5" style="float: left;">
                            <el-rate v-model="a.score" :colors="gradeColors" show-score disabled></el-rate>
                        </el-col>
                        <el-col :span="4.5" style="float: right;">
                            <div style="font-size: 12px;color: rgb(136, 136, 136);">
                                {{$moment(a.commData).format('YYYY-MM-DD')}}
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin: 10px 0px;">
                        <el-col :span="20" style="font-size: 14px;color: #666;text-align: left;">
                            {{a.comments}}
                        </el-col>
                    </el-row>
                    <!-- 获取评论图片 -->
                    <el-row>
                        <el-col :span="24">
                            <div v-for="b in menuCommImgs" v-if="a.id==b.id">
                                <div v-if="b.imgs.length>0">
                                    <img v-for="c in b.imgs" :src="c" width="120" height="120"
                                         style="float: left;margin: 10px;"/>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 分割线 -->
                    <el-divider></el-divider>
                </div>
                <!-- 分页控件 -->
                <el-pagination @size-change="handleSizeChange4" @current-change="handleCurrentChange4"
                               :hide-on-single-page="value4" background :current-page="currentPage4"
                               :page-sizes="[5, 10, 15, 20]" :page-size="pageSize4"
                               layout="total, sizes, prev, pager, next, jumper" :total="total4">
                </el-pagination>
            </el-card>

        </el-main>
    </el-container>

    <!-- 支付模态框 -->
    <el-dialog title="选择支付方式" :visible.sync="showintype" width="30%"  center>
        <div id="balance">锅锅币余额：{{user.balance}}</div>


        <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="paybalance(itemcopy)">锅锅币支付</el-button>
        </span>
        <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="showMoney(itemcopy)">支付宝支付</el-button>
        </span>

    </el-dialog>

    <div id="payForAMenu">

    </div>

    <!-- 页脚 -->
    <el-container>
        <el-footer style="background: #F8F8F8; width: 100%;font-size: 12px;color: #999;height: 60px;">
            <el-row>
                <el-col :span="20" :offset="2">
                    <img src="../img/页脚.png" height="100"/>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>


</div>

<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/moment.js"></script>
<script>

    axios.defaults.withCredentials = true;//设置跨域
    Vue.prototype.$moment = moment; //日期格式控件
    var v1 = new Vue({
        el: '#app1',
        data: {
            //用户信息
            user:Object,
            //评分5角星控件
            gradeValue: 4.5,
            gradeColors: ['#99A9BF', '#F7BA2A', '#FF9900'],
            //评论分页控件：
            total4: 16,  //总页数
            pageSize4: 5,   //每页条数
            currentPage4: 1, //当前页
            //支付模态框是否显示
            showintype: false,
            //添加评论显示控件
            addCommentsModel: true,
            //添加评论
            dialogVisible: false,
            dialogImageUrl: "",
            fileList1: [],
            addComment: {
                comments: "",
                score1: 4.9,
                score2: 4.9,
                score3: 4.9,
                file: [],
            },
            itemcopy:Object,
            averagePrice: 57,    //人均消费
            restaurantId: 1,     //店铺id
            menuId: 1,           //菜单id
            searchInput: "", //搜索输入框
            searchSelect: "",//搜索下拉框
            opends: ['1', '2'],
            searchReminderData: ["金牌泰香米", "万州烤全鱼", "瓜西西火锅", "锅锅烤鸭", "五香串串"],
            menuDatas: {   //菜单
                menuId: 0,
                type: "",
                menuName: "",
                price: 0.01,
                description: "",
                discounts: 0.01,
                vip_price: 0.01,
                integral: 0,
                status: 0,
                saleNum: 0,
            },
            restImgs: [{    //店铺的图片
                id: 0,
                imgs: [""]
            }],
            restData: [{    //店铺组
                restaurantId: 0,
                shopName: "",
                tel: "",
                address: "",
                status: "",
                longtitude: 0.1,
                latitude: 0.1,
                income: 0.1,
            }],
            menuImgs: [""],     //菜单的图片
            menuComments: [{     //评论
                id: 0,
                menuId: 0,
                userId: 0,
                comments: "",
                score: 0.1,
                commData: "",
            }],
            menuCommImgs: [{     //评论图片
                id: 0,
                userName: "",
                imgs: [""],
            }],
            visible: false,
            activeIndex: '1',
            myUrl: "/html/login.html",
            username: "你好，请登录",
            loginStatus: false,
            map: '',
            point: ''

        },
        mounted: function () {
            this.checkLoginStatus();
            this.getMenuId();
        },
        methods: {
            //显示支付方式模态框
            pay:function(item){
                if (this.loginStatus) {
                    this.showintype = true;
                    this.itemcopy = item;
                } else {
                    this.$message.error('请先登录');
                }

            },
            //查询用户锅锅币余额
            querybalance:function(){
                let th = this;
                axios.get('/querybalance', {
                    params: {
                    }
                })
                    .then(function (resp) {
                        if (resp.data.success) {
                            th.user = resp.data.data;

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //锅锅币支付
            paybalance:function(item){
                let th = this;
                console.log(item)
                axios.get('/querypay', {
                    params: {
                        restaurantId:item.restaurantId,
                    }
                })
                    .then(function (resp) {
                        if (resp.data.success) {
                            var bool = resp.data.data;
                            if (bool==true){
                                th.$message("支付成功");
                                th.showintype = false;
                            }else {
                                th.$message("支付失败，锅锅币不足")
                            }

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },

            init(myLnt, myLat) {
                console.log("初始化");
                var _this = this;

                //初始渲染页面获取数据
                axios.get('/getMessageByRestaurantId', {
                    params: {
                        menuId: _this.menuId,
                        myLnt: myLnt,
                        myLat: myLat,
                    }
                })
                    .then(function (resp) {
                        console.log(resp);
                        if (resp.data.success) {
                            let data = resp.data.data;
                            _this.restData = data.restData;
                            _this.restImgs = data.restImgs;
                            _this.menuDatas = data.menuDatas;
                            _this.menuImgs = data.menuImgs;

                            for(let i in data.restData) {
                                let rPoint = new BMap.Point(data.restData[i].longtitude, data.restData[i].latitude);
                                console.log("餐厅的经纬度:" + data.restData[i].longtitude + "," + data.restData[i].latitude);
                                // 创建点标记
                                let marker = new BMapGL.Marker(rPoint);
                                _this.map.addOverlay(marker);

                                // 创建信息窗口
                                let opts = {
                                    width: 200,
                                    height: 100,
                                    title: data.restData[i].shopName
                                };
                                let infoWindow = new BMapGL.InfoWindow('地址：' + data.restData[i].address, opts);
                                // 点标记添加点击事件
                                marker.addEventListener('click', function () {
                                    _this.map.openInfoWindow(infoWindow, rPoint); // 开启信息窗口
                                });
                            }

                        } else {
                            _this.$message({
                                showClose: true,
                                message: resp.data.message,
                                type: 'error',
                                duration: 1500
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

                //获取评论数据
                this.commentsQuery(this.currentPage4, this.pageSize4, this.menuId);
                //获取菜品id，当前菜单那是否未评论
                axios.get('/getMenuIdAndCommentsStatus', {
                    params: {
                        menuId: _this.menuId
                    }
                })
                    .then(function (resp) {
                        console.log(resp);
                        if (resp.data.success) {
                            let data = resp.data.data;
                            _this.menuId = data.menuId;
                            _this.addCommentsModel = data.addCommentsModel;
                        } else {
                            _this.$message({
                                showClose: true,
                                message: resp.data.message,
                                type: 'error',
                                duration: 1500
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //提交评论的事件
            fileChanges(file, fileList) {
                console.log("图片改变");
                console.log(file);
                console.log(fileList);
                for (let i in fileList) {
                    this.addComment.file[i] = fileList[i].raw;
                }
            },
            uploadFile(file) {
                console.log("添加图片");
                console.log(file);
                this.addComment.file.append(file.file);
            },
            submitCommentFileUpload() {
                console.log("提交图片");
                var that = this;
                var data = new FormData();
                if (that.addComment.file.length != 0) {
                    for (let i in that.addComment.file) {
                        data.append("files", that.addComment.file[i]);
                    }
                }
                data.append("score1", that.addComment.score1);
                data.append("score2", that.addComment.score2);
                data.append("score3", that.addComment.score3);
                data.append("comments", that.addComment.comments);
                $.ajax({
                    url: '/addComments',
                    type: 'post',
                    dataType: 'json',
                    // data: $("#form1").serialize(),
                    data: data,
                    processData: false,//提交数据不做处理
                    contentType: false,//不指定提交的数据类型
                    traditional: true,
                    //设置跨域问题
                    xhrFields: {withCredentials: true},
                    success: function (data, status) {
                        console.log(data);
                        console.log(status);
                        if (data.success == true) {
                            that.$message.success("题目添加成功");
                            location.href = "/html/MenuManager.html";
                        } else {
                            that.$message.error(data.message);
                        }
                    },
                    error: function (x, s, e) {
                        console.log(x);
                        console.log(s);
                        console.log(e);
                    }
                });
            },
            handleCommentFileRemove(file, fileList) {   //文件列表移除文件时的钩子
                console.log("移除图片");
                console.log(file, fileList);
            },
            handleCommentFilePreview(file) {    //点击图片
                console.log("点击图片");
                console.log(file);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            showMoney(shop) {      //立即预定按钮 点击显示支付模态框
                // this.payMoney = true;
                var _this = this;
                $.ajax({
                    url: "/alipay",
                    dataType: "json",
                    contentType: 'application/json;charset=utf-8', //前端传json对象，缺少这个报错415
                    data: JSON.stringify(shop), //缺少这个400
                    // data:{s},
                    type: "post",
                    success: function (d) {
                         console.log("测试：" + d);
                        if (d.success) {
                            $("#payForAMenu").html(d.data);
                            _this.$message.success("正在跳转...");
                        } else {
                            _this.$message.error('请求错误' + d.message);
                        }
                    }
                });
            },
            completePay() {  //支付完成--按钮点击事件
                this.$message.success("正在跳转，请稍后...");
            },
            handleSizeChange4(i) {   //评论每页条数改变事件
                this.$message.info("显示数量改变成功");
                this.pageSize4 = i;
                this.commentsQuery(this.currentPage4, this.pageSize4, this.menuId);
            },
            handleCurrentChange4(currPageIndex) {    //评论分页跳转
                this.commentsQuery(currPageIndex, this.pageSize4, this.menuId);
            },
            commentsQuery(currentPage4, pageSize4, menuId) {    //分页查询评论
                var _this = this;
                axios.get('/getCommentsByPage', {
                    params: {
                        currentPage: currentPage4,
                        pageSize: pageSize4,
                        menuId: menuId,
                    }
                })
                    .then(function (resp) {
                        console.log(resp);
                        if (resp.data.success) {
                            let data = resp.data.data;
                            _this.menuComments = data.ipage.records;
                            _this.total4 = data.ipage.total;
                            _this.currPage = data.ipage.current;
                            _this.menuCommImgs = data.menuCommImgs;
                        } else {
                            _this.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            MethodSearchSelectChange() { //输入下拉框改变触发事件

            },
            MethodSearchReminderClick(i) {   //搜索框下方字体点击
                this.searchInput = i;
            },
            MethodClearSearchInput() {   //叉叉按钮点击事件-清空搜索框里的文字
                this.searchInput = "";
            },
            MethodBeginSearch() {        //点击搜索图标按钮-开始搜索
                var message = this.searchInput;
                var type = this.searchSelect;
                var _this = this;
                if (message == "") {
                    _this.$message({
                        showClose: true,
                        message: "请输入内容再搜索",
                        type: 'warning',
                        duration: 1500
                    });
                } else {
                    //request search
                    var _this = this;
                    axios.get('/getSearchResult', {
                        params: {
                            message: message,
                            type: type,
                        }
                    })
                        .then(function (resp) {
                            console.log(resp);
                            if (resp.data.success) {
                                let data = resp.data.data;
                                _this.tableData = data.content;
                                _this.total = data.total;
                                _this.currPage = data.currPage;

                            } else {
                                _this.$message.error('请求错误' + resp.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            handleSelect(key, keyPath) {    //顶部菜单激活信息回调
                console.log(key, keyPath);
            },
            getMenuId() {
                console.log("执行获取套餐方法");
                let that = this;
                $.ajax({
                    url: "/getMenuId",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        console.log(resp.success);
                        if (resp.success) {
                            console.log("获取到套餐ID");
                            console.log(resp.data.menuId);
                            that.menuId = resp.data.menuId;
                            console.log(that.menuId);
                            that.initMap();
                            that.getCurrentLocation()
                        } else {
                            location.href = "/html/shouye.html";
                        }
                    }
                });
            },
            checkLoginStatus() {
                let that = this;
                $.ajax({
                    url: "/checkLoginStatus",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            that.loginStatus = true;
                            that.myUrl = "/html/guoguolog.html";
                            that.username = resp.data.username;
                            that.querybalance();
                        }
                    }
                });
            },
            logout() {
                $.ajax({
                    url: "/logout",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            location.href = "/html/shouye.html";
                        }
                    }
                });
            },
            initMap() {
                let that = this;
                this.map = new BMapGL.Map('map'); // 创建Map实例
                this.map.enableScrollWheelZoom(); // 启用滚轮放大缩小、
            },
            getCurrentLocation() {
                if (navigator.geolocation) {  //如果浏览器支持获取地理信息
                    navigator.geolocation.getCurrentPosition(this.successCallback, this.errorCallback);
                } else {
                    console.log("您的浏览器不支持地理定位");
                }
            },
            successCallback(position) {
                console.log("获取地理信息成功");
                let latitude = position.coords.latitude;  // 维度
                let longitude = position.coords.longitude;  // 经度
                console.log("维度：" + latitude + "    经度：" + longitude);  // 可以通过百度地图API和经纬度获取具体信息

                let ggPoint = new BMap.Point(longitude, latitude);
                let convertor = new BMap.Convertor();
                let pointArr = [];
                pointArr.push(ggPoint);
                convertor.translate(pointArr, 1, 5, this.translateCallback)
            },
            errorCallback(error) {
                console.log("获取地理信息失败");  //没有给浏览器获取位置权限时，会执行errorCallback
                console.log(error);  // PositionError {code: 1, message: "User denied Geolocation"}
                this.point = new BMapGL.Point(116.404, 39.915);
                this.map.centerAndZoom(this.point, 18);
                this.init(116.404, 39.915);
            },
            translateCallback(data) {
                console.log(data.points[0])
                this.point = data.points[0]; // 创建点坐标
                this.map.centerAndZoom(this.point, 18);
                this.init(this.point.lng, this.point.lat);
            },
            showLocation(item) {
                this.point = new BMapGL.Point(item.longtitude, item.latitude);
                this.map.centerAndZoom(this.point, 18);
            }
        },
        computed: {
            tableData() {
                var item = {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                };
                return Array(20).fill(item);
            },
            value4: function () {   //是否显示分页条
                if (this.total4 <= this.pageSize4) {
                    this.$message.info("分页隐藏，刷新页面重置");
                    return true;
                } else {
                    return false;
                }
            },
        }
    });
</script>
</body>

</html>